<template>
  <form @submit.prevent="submit()">
    <legend>添加英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input v-model="heroesForm.hName" type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input v-model="heroesForm.hGender" type="radio" name="gender" value="男" /> 男
        <input v-model="heroesForm.hGender" type="radio" name="gender" value="女" /> 女
      </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</template>

<script>
// 导包的时候，多次导入不代表多次引入这个文件，而是走缓存。
// import axios from "axios";
export default {
  data() {
    return {
      // 表单数据对象，建议和后台需要的字段名称一致。
      heroesForm: {
        hName: "",
        hGender: "男"
      }
    };
  },
  methods: {
    submit() {
      // 使用axios进行添加英雄请求
      // 传参对象：hName  hGender cTime 后台需要
      // 操作：把 heroesForm 与 cTime 合并到传参对象中
      this.$http
        .post("heroes", {
          cTime: new Date(),
          ...this.heroesForm
        })
        .then(() => {
          // 成功 跳转列表
          this.$router.push('/heroes')
        }).catch(()=>{
          alert('添加失败')
        })
    }
  }
};
</script>

<style>
</style>